<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SpaceLab</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
    <!-- Fonts from Font Awsome -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- CSS Animate -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Custom styles for this theme -->
    <link rel="stylesheet" href="assets/css/main.css">
    <!-- iCheck-->
    <link rel="stylesheet" href="assets/plugins/icheck/css/_all.css">
    <!-- Editor-->
    <link rel="stylesheet" href="assets/plugins/bootstrap-wysihtml5/css/bootstrap-wysihtml5.css">
    <!-- Fonts -->
    <!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> -->
    <!-- Feature detection -->
    <script src="assets/js/modernizr-2.6.2.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <section id="container">
        <header id="header">
            <!--logo start-->
            <div class="brand">
                <a href="index.html" class="logo">
                    <span>Space</span>Lab</a>
            </div>
            <!--logo end-->
            <div class="toggle-navigation toggle-left">
                <button type="button" class="btn btn-default" id="toggle-left" data-toggle="tooltip" data-placement="right" title="Toggle Navigation">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
            <div class="user-nav">
                <ul>
                    <li class="dropdown messages">
                        <span class="badge badge-danager animated bounceIn" id="new-messages">5</span>
                        <button type="button" class="btn btn-default dropdown-toggle options" id="toggle-mail" data-toggle="dropdown">
                            <i class="fa fa-envelope"></i>
                        </button>
                        <ul class="dropdown-menu alert animated fadeInDown">
                            <li>
                                <h1>You have
                                    <strong>5</strong>new messages</h1>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/img/avatar.gif" alt="" class="img-circle">
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">James Bagian</span>
                                        <span class="time">30 mins</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, elit rutrum felis sed erat augue fusce</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/img/avatar1.gif" alt="" class="img-circle">
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Jeffrey Ashby</span>
                                        <span class="time">2 hour</span>
                                        <div class="message-content">hendrerit pellentesque, iure tincidunt, faucibus vitae dolor aliquam</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/img/avatar2.gif" alt="" class="img-circle">
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">John Douey</span>
                                        <span class="time">3 hours</span>
                                        <div class="message-content">Penatibus suspendisse sit pellentesque eu accumsan condimentum nec</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/img/avatar3.gif" alt="" class="img-circle">
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Ellen Baker</span>
                                        <span class="time">7 hours</span>
                                        <div class="message-content">Sem dapibus in, orci bibendum faucibus tellus, justo arcu</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/img/avatar4.gif" alt="" class="img-circle">
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Ivan Bella</span>
                                        <span class="time">6 hours</span>
                                        <div class="message-content">Curabitur metus faucibus sapien elit, ante molestie sapien</div>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">Check all messages <i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>

                    </li>
                    <li class="profile-photo">
                        <img src="assets/img/avatar.png" alt="" class="img-circle">
                    </li>
                    <li class="dropdown settings">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      Mike Adams <i class="fa fa-angle-down"></i>
                    </a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li>
                                <a href="#"><i class="fa fa-user"></i> Profile</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-calendar"></i> Calendar</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge badge-danager" id="user-inbox">5</span></a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-power-off"></i> Logout</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="toggle-navigation toggle-right">
                            <button type="button" class="btn btn-default" id="toggle-right">
                                <i class="fa fa-comment"></i>
                            </button>
                        </div>
                    </li>

                </ul>
            </div>
        </header>
        <!--sidebar start-->
        <aside class="sidebar">
            <div id="leftside-navigation" class="nano">
                <ul class="nano-content">
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>UI Elements</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>

                            <li><a href="ui-alerts-notifications.html">Alerts &amp; Notifications</a>
                            </li>
                            <li><a href="ui-panels.html">Panels</a>
                            </li>
                            <li><a href="ui-buttons.html">Buttons</a>
                            </li>
                            <li><a href="ui-slider-progress.html">Sliders &amp; Progress</a>
                            </li>
                            <li><a href="ui-modals-popups.html">Modals &amp; Popups</a>
                            </li>
                            <li><a href="ui-icons.html">Icons</a>
                            </li>
                            <li><a href="ui-grid.html">Grid</a>
                            </li>
                            <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a>
                            </li>
                            <li><a href="ui-nestable-list.html">Nestable Lists</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:void(0);"><i class="fa fa-table"></i><span>Tables</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>
                            <li><a href="tables-basic.html">Basic Tables</a>
                            </li>

                            <li><a href="tables-data.html">Data Tables</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:void(0);"><i class="fa fa fa-tasks"></i><span>Forms</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>
                            <li><a href="forms-components.html">Components</a>
                            </li>
                            <li><a href="forms-validation.html">Validation</a>
                            </li>
                            <li><a href="forms-mask.html">Mask</a>
                            </li>
                            <li><a href="forms-wizard.html">Wizard</a>
                            </li>
                            <li><a href="forms-multiple-file.html">Multiple File Upload</a>
                            </li>
                            <li><a href="forms-wysiwyg.html">WYSIWYG Editor</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub-menu active">
                        <a href="javascript:void(0);"><i class="fa fa-envelope"></i><span>Mail</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>
                            <li><a href="mail-inbox.html">Inbox</a>
                            </li>
                            <li class="active"><a href="mail-compose.html">Compose Mail</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:void(0);"><i class="fa fa-bar-chart-o"></i><span>Charts</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>
                            <li><a href="charts-chartjs.html">Chartjs</a>
                            </li>
                            <li><a href="charts-morris.html">Morris</a>
                            </li>
                            <li><a href="charts-c3.html">C3 Charts</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:void(0);"><i class="fa fa-map-marker"></i><span>Maps</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>
                            <li><a href="map-google.html">Google Map</a>
                            </li>
                            <li><a href="map-vector.html">Vector Map</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="typography.html"><i class="fa fa-text-height"></i><span>Typography</span></a>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:void(0);"><i class="fa fa-file"></i><span>Pages</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                        <ul>
                            <li><a href="pages-blank.html">Blank Page</a>
                            </li>
                            <li><a href="pages-login.html">Login</a>
                            </li>
                            <li><a href="pages-sign-up.html">Sign Up</a>
                            </li>
                            <li><a href="pages-calendar.html">Calendar</a>
                            </li>
                            <li><a href="pages-timeline.html">Timeline</a>
                            </li>
                            <li><a href="pages-404.html">404</a>
                            </li>
                            <li><a href="pages-500.html">500</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

        </aside>
        <!--sidebar end-->
        <!--main content start-->
        <section class="main-content-wrapper">
            <section id="main-content">
                <!--mail wrapper start-->
                <div class="row">
                    <div class="col-md-2 col-sm-12" id="compose-wrapper">
                        <div class="panel">
                            <aside class="panel-body">
                                <a href="mail-compose.html" class="btn btn-primary btn-block">Compose Mail</a>
                                <ul class="nav nav-pills nav-stacked compose-nav">
                                    <li class="active">
                                        <a href="#"> <i class="fa fa-inbox"></i> Inbox
                                            <span class="label label-danger pull-right inbox-notification">83</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-star-o"></i> Starred
                                            <span class="label label-warning pull-right inbox-notification">8</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-envelope-o"></i> Sent Mail</a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark-o"></i> Important</a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-pencil-square-o"></i> Drafts
                                            <span class="label label-info pull-right inbox-notification">1</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-trash-o"></i> Trash</a>
                                    </li>
                                </ul>
                            </aside>
                        </div>

                        <div class="panel">
                            <aside class="panel-body">
                                <button class="btn btn-default btn-block">Manage Labels</button>
                                <ul class="nav nav-pills nav-stacked compose-nav">
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark danger-txt"></i> Urgent

                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark warning-txt"></i> Social
                                            <span class="label label-warning pull-right"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark primary-txt"></i> Follow-up</a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark success-txt"></i> Work Inquiry</a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark info-txt"></i> Save
                                            <span class="label label-info pull-right inbox-notification"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"> <i class="fa fa-bookmark default-txt"></i> ToDo</a>
                                    </li>
                                </ul>
                            </aside>
                        </div>

                    </div>
                    <div class="col-md-4 col-sm-12" id="inbox-wrapper">

                        <section class="panel">
                            <header class="panel-heading wht-bg">
                                <h4 class="gen-case">Inbox (83)
                                    <form action="#" class="pull-right mail-src-position">
                                        <div class="input-append">
                                            <input type="text" class="form-control " placeholder="Search Mail">
                                        </div>
                                    </form>
                                </h4>
                            </header>
                            <div class="panel-body minimal">
                                <div class="mail-option">
                                    <div class="pull-left mail-checkbox ">
                                        <input type="checkbox">
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                                            All
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">None</a>
                                            </li>
                                            <li><a href="#">Read</a>
                                            </li>
                                            <li><a href="#">Unread</a>
                                            </li>
                                            <li><a href="#">Starred</a>
                                            </li>
                                            <li><a href="#">Unstarred</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a data-original-title="Refresh" data-placement="top" data-toggle="tooltip" href="#" class="btn btn-default btn-sm tooltips">
                                            <i class=" fa fa-refresh"></i>
                                        </a>
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
                                            More
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#"><i class="fa fa-pencil"></i> Mark as Read</a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-ban"></i> Spam</a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <ul class="inbox-pag pull-right">
                                        <li>
                                            <span>1-50 of 83</span>
                                        </li>
                                        <li>
                                            <a class="btn btn-default btn-sm" href="#"><i class="fa fa-angle-left  pag-left"></i></a>
                                        </li>
                                        <li>
                                            <a class="btn btn-default btn-sm" href="#"><i class="fa fa-angle-right pag-right"></i></a>
                                        </li>
                                    </ul>

                                </div>
                                <div class="table-responsive">
                                    <table class="table table-inbox table-hover">
                                        <tbody>
                                            <tr class="unread">
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Dribbble</span>
                                                        [Dribbble] Work Inquiry from Google Inc.</a>
                                                </td>
                                                <td class="text-right">April 20 <i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr class="unread">
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">James Bagian</span>
                                                        Development - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 20
                                                    <span class="label label-danger pull-right">urgent</span>
                                                </td>
                                            </tr>
                                            <tr class="unread">
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Jeffrey Ashby</span>
                                                        Progress - Sed ut perspiciatis unde omnis iste natus..</a>
                                                </td>
                                                <td class="text-right">April 20 <i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr class="unread">
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">John Douey</span>
                                                        Touch Base - Reprehenderit qui in ea voluptate velit esse quam</a>
                                                </td>
                                                <td class="text-right">April 20</td>
                                            </tr>
                                            <tr class="unread">
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ellen Baker</span>
                                                        Timeline - Nam libero tempore, cum soluta nobis</a>
                                                </td>
                                                <td class="text-right">April 20
                                                    <span class="label label-info pull-right">save</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        New Follower - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19<i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">John Doue</span>
                                                        UX Perspective - Reprehenderit qui in ea voluptate velit esse quam</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Mailchimp - Sed ut perspiciatis unde omnis iste natus..</a>
                                                </td>
                                                <td class="text-right">April 19<i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Design Work - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19
                                                    <span class="label label-warning pull-right">social</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ellen Baker</span>
                                                        Freelance - Sed ut perspiciatis unde omnis iste natus</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Timeline - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">James Bagian</span>
                                                        Check it - Maiores alias consequatur aut perferendis doloribus</a>
                                                </td>
                                                <td class="text-right">April 19<i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Bookmark this - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19
                                                    <span class="label label-danger pull-right">urgent</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Lunch? - Nam libero tempore, cum soluta nobis</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Coffee Break - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ellen Baker</span>
                                                        Beta testing - Praesentium voluptatum deleniti atque corrupti quos</a>
                                                </td>
                                                <td class="text-right">April 19<i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Prod Servers - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Design Work - Omnis voluptas assumenda est, omnis dolor repellendus</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Authentic Goods - Culpa qui officia deserunt mollitia animi, id est laborum et</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">John Doue</span>
                                                        SASS Work - Elit vitae ridiculus nonummy vestibulum</a>
                                                </td>
                                                <td class="text-right">April 19<i class="fa fa-paperclip"></i>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="mail-checkbox">
                                                </td>
                                                <td><i class="fa fa-star-o"></i>
                                                </td>
                                                <td class="message">
                                                    <a href="#">
                                                        <span class="title">Ivan Bella</span>
                                                        Almost there - Reiciendis voluptatibus maiores alias consequatur aut</a>
                                                </td>
                                                <td class="text-right">April 19</td>
                                            </tr>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </section>

                    </div>
                    <div class="col-md-6 col-sm-12" id="view-mail-wrapper">
                        <div class="panel">
                            <div class="panel-body">
                                <header>
                                    <h2>New Message</h2>
                                </header>
                                <div class="row view-mail-header">
                                    <div class="col-md-12">
                                        <div class="view-mail-reply pull-right">
                                            <button class="btn btn-sm btn-primary">Send</button>
                                            <button class="btn btn-default btn-sm tooltips" data-original-title="Discard" data-toggle="tooltip" data-placement="top" title="Discard"><i class="fa fa-times"></i> Discard
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel view-compose-body">
                                            <div class="panel-body">
                                                <div class="form-group">
                                                    <input type="email" class="form-control" id="to" placeholder="To:">
                                                    <div class="send-options">
                                                        <a href="javascript:void(0);" class="ccLink">Cc</a>
                                                        <a href="javascript:void(0);" class="bccLink">Bcc</a>
                                                    </div>
                                                </div>
                                                <div class="form-group" id="form-group-cc">
                                                    <input type="text" class="form-control" id="cc" placeholder="Cc:">
                                                </div>
                                                <div class="form-group" id="form-group-bcc">
                                                    <input type="text" class="form-control" id="bcc" placeholder="Bcc:">
                                                </div>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" id="subject" placeholder="Subject:">
                                                </div>

                                                <textarea class="textarea form-control" rows="5" cols="40" placeholder="Enter text ..." style="width: 100%; height: 200px"></textarea>
                                            </div>
                                            <div class="panel-footer">
                                                <button class="btn btn-sm btn-primary ">Send</button>
                                                <button class="btn btn-default btn-sm "><i class="fa fa-times"></i> Discard</button>
                                                <button class="btn btn-default btn-sm pull-right"><i class="fa fa-paperclip"></i> Attach a File</button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                </div>
                <!--mail wrapper end-->
            </section>
        </section>
        <!--main content end-->
        <!--sidebar right start-->
        <aside class="sidebarRight">
            <div id="rightside-navigation">
                <div class="sidebar-heading"><i class="fa fa-user"></i> Contacts</div>
                <div class="sidebar-title">online</div>
                <div class="list-contacts">
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>James Bagian</h4>
                            <p>Los Angeles, CA</p>
                        </div>
                        <div class="item-status item-status-online"></div>
                    </a>
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar1.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>Jeffrey Ashby</h4>
                            <p>New York, NY</p>
                        </div>
                        <div class="item-status item-status-online"></div>
                    </a>
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar2.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>John Douey</h4>
                            <p>Dallas, TX</p>
                        </div>
                        <div class="item-status item-status-online"></div>
                    </a>
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar3.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>Ellen Baker</h4>
                            <p>London</p>
                        </div>
                        <div class="item-status item-status-away"></div>
                    </a>
                </div>

                <div class="sidebar-title">offline</div>
                <div class="list-contacts">
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar4.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>Ivan Bella</h4>
                            <p>Tokyo, Japan</p>
                        </div>
                        <div class="item-status"></div>
                    </a>
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar5.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>Gerald Carr</h4>
                            <p>Seattle, WA</p>
                        </div>
                        <div class="item-status"></div>
                    </a>
                    <a href="javascript:void(0)" class="list-item">
                        <div class="list-item-image">
                            <img src="assets/img/avatar6.gif" class="img-circle">
                        </div>
                        <div class="list-item-content">
                            <h4>Viktor Gorbatko</h4>
                            <p>Palo Alto, CA</p>
                        </div>
                        <div class="item-status"></div>
                    </a>
                </div>
            </div>
        </aside>
        <!--sidebar right end-->
    </section>
    <!--Global JS-->
    <script src="assets/js/jquery-1.10.2.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/waypoints/waypoints.min.js"></script>
    <script src="assets/js/application.js"></script>
    <!--Page Level JS-->
    <script src="assets/plugins/icheck/js/icheck.min.js"></script>
    <script src="assets/plugins/bootstrap-wysihtml5/js/wysihtml5-0.3.0.js"></script>
    <script src="assets/plugins/bootstrap-wysihtml5/js/bootstrap3-wysihtml5.js"></script>
    <script>
    $(document).ready(function() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });
        $('.tooltips').tooltip()
        $('.textarea').wysihtml5();
        $('.ccLink').click(function() {
            $(this).hide();
            $('#form-group-cc').slideDown();
        });
        $('.bccLink').click(function() {
            $(this).hide();
            $('#form-group-bcc').slideDown();
        });

    });
    </script>

</body>

</html>
